import React from "react";
import { Page, useNavigate, useLocation } from "zmp-ui";
import { useI18n } from "../i18n";
import { FaqQuestionItem } from "../types/faq";
import Navbar from "../components/navbar";

const HelpDetailPage: React.FunctionComponent = () => {
  const { t } = useI18n();
  const navigate = useNavigate();
  const location = useLocation();
  
  // 从路由状态中获取FAQ项目数据
  const faqItem: FaqQuestionItem = location.state?.faqItem;

  // 如果没有数据，返回上一页
  if (!faqItem) {
    navigate(-1);
    return null;
  }


  return (
    <Page className="page" style={{ padding: 0, background: '#f5f5f7' }}>
      {/* 顶部导航栏 */}
      <Navbar title={t("help.title")} />

      {/* 内容区域 */}
      <div style={{
        padding: '28px',
        backgroundColor: '#fff',
        margin: '14px',
        borderRadius: 12,
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        marginBottom: '40px'
      }}>
        {/* 问题标题 */}
        <h2 style={{
          fontSize: 21,
          fontWeight: 'bold',
          color: '#39404D',
          margin: '0 0 12px 0',
          lineHeight: 1.4
        }}>
          {faqItem.title}
        </h2>

        {/* 问题答案 */}
        <div style={{
          fontSize: 14,
          color: '#39404D',
          fontFamily: 'sans-serif-medium',
          lineHeight: 1.6,
          whiteSpace: 'pre-line'
        }}>
          {faqItem.content}
        </div>
      </div>
    </Page>
  );
};

export default HelpDetailPage;
